{extend name="iframe" /}
{block name="css"}
<style type="text/css">
    .editForm{
        margin-top: 20px;
    }
    .submit_btn{
        display: none;
    }
    @media (min-width: 768px){
        .bootstrap-switch{
            margin-top: 7px;
        }
    }
    label.chk_label{text-align: right;margin-left: 15px;}
</style>
{/block}

{block name="content"}
<div class="container-fluid content-wrapper-box">
    <div class="content-wrapper">
        <form class="form-horizontal editForm" action="" method="post">
            <div class="form-group">
                <label class="control-label col-xs-2">
                    商家名称&nbsp;
                </label>
                <div class="col-xs-8">
                    <p class="form-control-static">{$merchant.name}</p>
                </div>
            </div>

            <div class="form-group overarea">
                <div class="col-sm-offset-1 col-sm-10"><hr></div>
                <label class="control-label col-xs-2">
                    <em class="must_fill">*</em>覆盖区域&nbsp;
                </label>
                <div class="col-xs-8">
                    <div class="col-xs-12 form-inline cxselect_addr">
                        <select class="province form-control" name="srv_province[]" data-first-title="选择省" required  data-msg="地区不能为空"></select>
                        <select class="city form-control" name="srv_city[]" data-first-title="选择市"></select>
                        <!--<select class="area form-control" name="srv_area[]" data-first-title="选择区"></select>-->
                        <select class="area form-control hidden" data-first-title="选择区"></select>
                    </div>
                    <div class="col-xs-12 area_chkbox" style="padding-top: 7px;">
                    </div>
                </div>
                <div class="col-sm-2 clone">
                    <button type="button" class="btn btn-primary add"><i class="glyphicon glyphicon-plus"></i></button>
                    <button type="button" class="btn btn-default delete"><i class="glyphicon glyphicon-trash"></i></button>
                </div>
            </div>

            <input class="btn btn-primary submit_btn" onclick="submitFrom()" type="submit">
            <input class="btn btn-default reset_btn" type="hidden" onclick="resetForm()">
        </form>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript" charset="utf-8" src="__STATIC__/plugins/cxselect/jquery.cxselect.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.cxselect_addr').cxSelect({
            url: '/public/admin/plugins/cxselect/cityData.min.json',
            selects: ['province', 'city', 'area'],
            emptyStyle: 'none'
        });

        //克隆
        $('form.editForm').on('click', 'button.add', function(){
            var $div = $(this).parent().parent();
            $div.clone().find('div.area_chkbox').empty().end()
                .find('select').val('').end()
                .find('div.cxselect_addr').cxSelect({
                url: '/public/admin/plugins/cxselect/cityData.min.json',
                selects: ['province', 'city', 'area'],
                emptyStyle: 'none'
            }).end()
            .insertBefore( $('input.submit_btn') );

        }).on('click', 'button.delete', function(){
            if( $('div.overarea').length > 1){
                var $div = $(this).parent().parent();
                $div.remove();
            }
        }).on('change', 'select', function() {
            var $that = $(this);
            var val = $that.val();
            if(val=='' || val===null) return;

            if ( $that.hasClass('province') ) {
                //【省】
                if( val[val.length -1] == '市' ){
                    //是否是【直辖市】
                    appendChkBox( $that.next('select').hide() ,val);
                }else{
                    //清空
                    var $areaChk = $that.parent().next('div.area_chkbox');
                    $areaChk.empty();
                }

            }else if( $(this).hasClass('city') ){
                //【普通市】
                appendChkBox( $that.next('select') ,val);
            }
        });


        //附加checkbox表单
        function appendChkBox($sel, curCity){
            var $areaChk = $sel.parent().next('div.area_chkbox');
            $areaChk.empty();
            $sel.children('option').each(function (idx, ele) {
                var area = $(this).val();
                if(area == '') return true;
                var tmp = [];
                tmp.push('<label class="chk_label">');
                //tmp.push('<input type="checkbox" class="chk_role" value="'+ area +'" name="srv_area[][]">');
                tmp.push('<input type="checkbox" class="chk_role" value="'+ area +'" name="srv_area['+ curCity +'][]">');
                tmp.push( area+' ');
                tmp.push('</label>');

                $areaChk.append(tmp.join(''));
            })
        }


        $.validator.setDefaults({
            errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            }
        });


    });


    //提交表单
    function submitFrom() {
        var  frameIndex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        //表单验证
        $(".editForm").validate({
            keydown:true,
            submitHandler: function(form) {
                $(form).ajaxSubmit({
                    dataType:'json',
                    success:function (response) {
                        if(response.code === 0){
                            parent.toastr.success(response.msg);
                            parent.layer.close(frameIndex);
                        }else{
                            parent.toastr.error(response.msg);
                        }
                        //刷新数据表格
                        parent.searchForm();
                    }
                });
            }
        })
    }
</script>
{/block}
